<template>
  <!-- login -->
  <div class="box">
    <share-login-header></share-login-header>
    <div class="content" v-show="show">
      <div class="title">
        <p>账号登录</p>
      </div>
      <div class="input_box">
        <input type="text" v-model="username" placeholder="请输入手机号" />
      </div>
      <div class="input_box">
        <input type="password" v-model="password" placeholder="请输入密码 (6-16位字母和数字组合)" />
      </div>
      <div class="menu">
        <p class="phone_verify" @click="phoneVerify">验证码登录</p>
        <router-link to="/shareSet/retrievePassword" style="color:#333333">找回密码</router-link>
      </div>
      <button class="submit" @click="loginSubmit()">登录</button>
      <div class="go_register">
        <p>
          <span>没有账号，去</span>
          <router-link to="/shareSet/register" style="color:#2F90F1">注册</router-link>
        </p>
      </div>
    </div>
    <!-- 手机验证登录 -->
    <div class="content" v-show="!show">
      <div class="title">
        <p>验证码登录</p>
      </div>
      <div class="input_box">
        <input type="text" v-model="phone" placeholder="请输入手机号" />
      </div>
      <div class="input_box">
        <input type="text" placeholder="请输入验证码" />
        <button class="code_button" @click="getCode($event)">获取验证码</button>
      </div>
      <div class="menu">
        <p class="phone_verify" @click="passwordVerify">密码登录</p>
        <router-link to="/shareSet/retrievePassword" style="color:#333333">找回密码</router-link>
      </div>
      <button class="submit">登录</button>
      <div class="go_register">
        <p>
          <span>没有账号，去</span>
          <router-link to="/shareSet/register" style="color:#2F90F1">注册</router-link>
        </p>
      </div>
    </div>
    <div class="footer_title">
      <p>
        更多丰富功能，可登录web端：
        <span>https://pan.ddbes.com/</span>
      </p>
    </div>
  </div>
</template>

<script>
import shareLoginHeader from "@/components/ExtractSharedFiles/shareLoginHeader";
export default {
  components: {
    shareLoginHeader
  },
  data() {
    return {
      show: 1,
      waitTime: 60,
      username: "",
      password: "",
      phone: ""
    };
  },
  methods: {
    phoneVerify() {
      this.show = false;
    },
    passwordVerify() {
      this.show = true;
    },
    goRegister() {
      this.$router.push("/shareSet/register");
    },
    getCode(e) {
      var that = this;
      if (this.waitTime == 60) {
        this.$http
          .get(`/verify/api/v1/sms/${this.phone}/7`)
          .then(function(data) {
            // if (data.data.code === 1) {
            //   that.buttonType = 1;
            //   const currentTime = new Date();
            //   localStorage.setItem(
            //     "verificationCodeTime",
            //     currentTime.getTime() + 60000
            //   );
            //   that.time = 60;
            //   that.rebuildTimeText();
            // }
            console.log(e.currentTarget.innerHTML);
            console.log(data);
            that.time(e.currentTarget);
          });
        console.log("123");
      }
    },
    time(ele) {
      var that = this;
      if (this.waitTime == 0) {
        ele.innerHTML = "获取验证码";
        this.waitTime = 60; // 恢复计时
      } else {
        ele.innerHTML = this.waitTime + "秒后重试";
        this.waitTime--;
        setTimeout(function() {
          that.time(ele); // 关键处-定时循环调用
        }, 1000);
      }
    },
    phoneFun(phones) {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(phones)) {
        console.log("手机号格式不正确");
        return false;
      } else {
        console.log("手机号格式正确");
        return true;
      }
    },
    loginSubmit() {
      var that = this;
      this.$loginApi
        .post("/oauth/mobile/token", {
          client: 3,
          mobile: this.username,
          password: this.password,
          deviceMark: this.$machineId,
          version: "2.0.7",
          network: "",
          deviceModel: this.$machineName
        })
        .then(function(data) {
          console.log(data);
          that.$http.defaults.headers.common["Authorization"] =
            "Bearer " + data.data.access_token;
          localStorage.setItem("ddbes-token", data.data.access_token);
          localStorage.setItem("current_user", that.username);
          that.getUserInfo(that.username);
          that.$message({
            type: "success",
            message: "登录成功"
          });
        });
    },
    getUserInfo: function(userName) {
      const that = this;
      this.$http.get("/user/user/info").then(function(data) {
        if (data.data.code === 1) {
          localStorage.setItem(
            userName + "_info",
            JSON.stringify(data.data.data)
          );
          that.$store.commit("setUserInfo", data.data.data);
        }
      });
    }
  },
  mounted() {
    (function(doc, win) {
      var docEl = win.document.documentElement;
      var resizeEvt =
        "orientationchange" in window ? "orientationchange" : "resize";
      var refreshRem = function() {
        var clientWidth =
          win.innerWidth ||
          doc.documentElement.clientWidth ||
          doc.body.clientWidth;
        if (!clientWidth) return;
        var fz;
        var width = clientWidth;
        fz = (((16 * width) / 375) * 10) / 16;
        docEl.style.fontSize = fz + "px";
      };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, refreshRem, false);
      doc.addEventListener("DOMContentLoaded", refreshRem, false);
      refreshRem();
    })(document, window);
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.box .content {
  width: 100%;
  flex: 1;
  padding: 4rem;
}
.content .title {
  margin-bottom: 5rem;
}
.content .title p {
  color: #333333;
  font-size: 2rem;
}
.content .input_box {
  display: flex;
  /* justify-content:center; */
  align-items: center;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #cdcdcd;
  font-size: 1.5rem;
  margin-top: 1rem;
}
.content .input_box input {
  border: none;
  background-color: none;
  outline: none;
  /* width: 90%; */
  flex: 1;
}
.submit {
  width: 100%;
  height: 5rem;
  background-color: #e9e8eb;
  border-radius: 45px;
  border: none;
  outline: none;
  color: #fff;
  font-size: 1.5rem;
  margin-top: 2rem;
}
.go_register {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 8rem;
}
.content .menu {
  height: 3rem;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 1.3rem;
}
.content .menu .phone_verify {
  color: #2e90f1;
}
.code_button {
  color: #3493f1;
  font-size: 1.5rem;
  background: none;
  border: none;
  outline: none;
  margin-left: 2rem;
  width: 10rem;
}
.footer_title {
  width: 100%;
  color: #aaaaaa;
  font-size: 1.1px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 1rem;
  text-align: center;
}
.footer_title p span {
  color: #809cc3;
}
</style>